<template>
  <div class="login">
    <div class="logoin-bj">
        <el-row class="login-box">  
          <div  class="login-box-l">
              <div class="logo">
                  <span></span>
                  <div class="">{{company?company:this.$store.state.company}}</div>
              </div>

              <h4>工作人员管理平台</h4>
              <h3>智能管理</h3>
              <h3>工作人员去向状态</h3>
          </div>
          <div class="login-box-r">
             <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
              <h3 class="title">欢迎登录</h3>
              <el-form-item prop="account">
                <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="请输入您的账号" suffix-icon="iconfont icon-ren1"></el-input>
              </el-form-item>
              <el-form-item prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请输入您的账号密码" suffix-icon="iconfont icon-mima"></el-input>
              </el-form-item>

              <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
                <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
              </el-form-item>
               <!-- <div class="remember">忘记密码?</div> -->
            </el-form>
          </div>
      </el-row>
    </div>
      
      
    
  </div>

</template>

<script>
import { requestLogin } from "../api/api";

export default {
  data() {
    return {
      logining: false,
      ruleForm2: {
        account: "",
        checkPass: ""
      },
      rules2: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" }
          //{ validator: validaePass }
        ],
        checkPass: [
          { required: true, message: "请输入密码", trigger: "blur" }
          //{ validator: validaePass2 }
        ]
      },
      checked: true,
      company: sessionStorage.getItem("company")
    };
  },
  methods: {
    handleReset2() {
      this.$refs.ruleForm2.resetFields();
    },
    handleSubmit2(ev) {
      var _this = this;
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
           this.logining = false;
          var loginParams = {
            name: this.ruleForm2.account,
            password: this.ruleForm2.checkPass
          };
          requestLogin(loginParams).then(res => {
            this.logining = false;
            if (res.status === 200) {
              let userInfo = {
                name: res.data.user.name,
                token: res.data.api_token,
                company: res.data.user.company
              };
              this.$store.commit("saveName", userInfo.name);
              this.$store.commit("saveCompany", userInfo.company);
              sessionStorage.setItem("token", userInfo.token);
              sessionStorage.setItem("name", userInfo.name);
              sessionStorage.setItem("company", userInfo.company);
              this.$router.push({ path: "/" });
            }
          }).catch(err =>{
            alert('登录失败')
             this.logining = false;
          })
          ;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
body {
  margin: 0px;
  padding: 0px;
  /*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/
  // background: #1F2D3D;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.logoin-bj {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  background-color: rgba(40, 122, 226, 0.3);
}
.login {
  background: url("../assets/img/861150825371613897.jpg");
  background-size: 100% 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 1200px;
}
.login-box {
  width: 800px;
  height: 500px;
  background-color: rgba(40, 122, 226, 0.8);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login-container {
  width: 350px;
  padding: 35px 35px 15px 35px;
  margin-top: 35px;
  .title {
    margin: 0px auto 40px auto;
    color: #363636;
    font-size: 24px;
  }
  .remember {
    text-align: center;
    margin: 0px 0px 35px 0px;
    color: #999999;
  }
}
.login-box-r {
  background-color: #fff;
  width: 470px;
  height: 500px;
  float: right;
}
.login-box-l {
  float: left;
  width: 330px;
  h4 {
    font-size: 26px;
    color: #fff;
    text-align: center;
    display: block;
    margin-top: 100px;
    margin-bottom: 70px;
  }
  h3 {
    font-size: 34px;
    padding: 0;
    margin: 5px;
    font-family: 楷体;
    color: #fff;
    margin-left: 40px;
  }
}

.logo {
  font-size: 14px;
  color: #fff;
  margin: 30px;
  span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
  }
}
</style>